<?php
/**
 * Created by IDEA.
 * User: dinesh
 * Date: Mar 25, 2012
 * Time: 8:32:26 PM
 */
$linkpath= CmbBaseConfig::getConfig("link");
    ?>



<link rel="stylesheet" type="text/css" href="css/dhtmlx/grid/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="css/dhtmlx/grid/dhtmlxgrid_pgn_bricks.css">
<link rel="STYLESHEET" type="text/css" href="css/dhtmlx/grid/dhtmlxgrid.css">
    <script src="js/dhtmlx/dhtmlxcommon.js"></script>
    <script src="js/dhtmlx/grid/dhtmlxgrid.js"></script>
    <script src="js/dhtmlx/grid/dhtmlxgridcell.js"></script>
    <script src="js/dhtmlx/grid/ext/dhtmlxgrid_filter.js"></script>
    <script src="js/dhtmlx/grid/ext/dhtmlxgrid_srnd.js"></script>
    <script src="js/dhtmlx/grid/dhtmlxgrid_pgn.js"></script>
     <script src="js/dhtmlx/toolbar/dhtmlxtoolbar.js"></script>
 <script src="js/dhtmlx/toolbar/dhtmlxProtobar.js"></script>
 <script src="js/dhtmlx/toolbar/dhtmlXProtobar.js"></script>


<script>


var mygrid;
var timeoutHnd;
var flAuto = false;
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("id,School Name,Address");
    mygrid.setInitWidths("100,300,300");
    mygrid.setColAlign("left,left,left");
    mygrid.setColSorting("server,na,server");
    mygrid.setColTypes("ro,ro,ro");
    //available in pro version only;
    if (mygrid.setColspan)
    mygrid.attachEvent("onBeforeSorting", customColumnSort);
    mygrid.setSkin("dhx_black");
     //mygrid.enablePaging(mode,pageSize,pagesInGrp,pagingControlsContainer,showRecInfo,pagingStateContainer);
     mygrid.enablePaging(true, 20, 10, "pagingArea", true, "infoArea");
  

    mygrid.setPagingSkin("dhx_black");
    // mygrid.setPagingSkin("toolbar","dhx_black");
    // mygrid.setPagingWTMode(navButtons,navLabel,pageSelect,perPageSelect);
    mygrid.init();
  //  mygrid.splitAt(1);
    mygrid.attachEvent("onBeforePageChanged", function() {
        if (!this.getRowsNum())
        return false;
        return true;
    });
    //this code enables paging and sets its skin;


    //code below written to support standard edtiton;
    //it written especially for current sample and may not work;
    //in other cases, DON'T USE it if you have pro version;

    mygrid.sortField_old = mygrid.sortField;
    mygrid.sortField = function() {
        mygrid.setColSorting("str,str,str");
        if (customColumnSort(arguments[0]))
        mygrid.sortField_old.apply(this, arguments);
    }
      mygrid.setColumnHidden(1,true);
    mygrid.sortRows = function(col, type, order) {}
   mygrid.attachEvent("onRowSelect",doOnRowSelected);
    mygrid.attachEvent("onXLE", showLoading);
    mygrid.attachEvent("onXLS", function() {
        showLoading(true)
        });
    //setOnLoadingStart(function(){showLoading(true)});
    mygrid.loadXML("?news/paging&un=" + Date.parse(new Date()));


}
function doOnRowSelected(rowID,celInd){
        var userdata = mygrid.cells(rowID,2).getValue();
        alert("Selected row ID is "+rowID+"\nUser clicked cell with index data "+userdata);

    }
function showLoading(fl) {
    var span = document.getElementById("recfound");
    if (!span)
        return;
    if (!mygrid._serialise) {
        span.innerHTML = "<i>Loading... available in Professional Edition of dhtmlxGrid</i>";
        return;
    }
    span.style.color = "red";
    if (fl === true)
    span.innerHTML = "loading...";
    else
    span.innerHTML = "";
}
function doSearch(ev) {
    if (!flAuto)
    return;
    var elem = ev.target || ev.srcElement;
    if (timeoutHnd)
    clearTimeout(timeoutHnd);
    timeoutHnd = setTimeout(reloadGrid, 500);
}
function reloadGrid() {
    var nm_mask = document.getElementById("search_nm").value;
    var cd_mask = document.getElementById("search_cd").value;
    showLoading(true);
    mygrid.clearAndLoad("?news/paging&nm_mask=" + nm_mask + "&cd_mask=" + cd_mask + "&orderBy=" + window.s_col + "&direction=" + window.a_direction);
    if (window.a_direction)
    mygrid.setSortImgState(true, window.s_col, window.a_direction);
}
function enableAutosubmit(state) {
    flAuto = state;
    document.getElementById("submitButton").disabled = state;
}
function customColumnSort(ind) {
    if (ind == 1) {
        alert("Table can't be sorted by this column.");
        if (window.s_col)
        mygrid.setSortImgState(true, window.s_col, window.a_direction);
        return false;
    }
    var a_state = mygrid.getSortingState();
    window.s_col = ind;
    window.a_direction = ((a_state[1] == "des") ? "asc": "des");
    reloadGrid();
    return true;
}
window.onload=doOnLoad;
</script>



<h3>Search By:</h3>
<div>
Name<br>
<input type="text" id="search_nm" onKeyDown="doSearch(event)">
</div>
<div>
Code<br>
<input type="text" id="search_cd" onKeyDown="doSearch(event)">
<button onClick="reloadGrid()" id="submitButton" style="margin-left:30px;">Search</button>
<input type="checkbox" id="autosearch" onClick="enableAutosubmit(this.checked)"> Enable Autosearch
</div>
<div id="gridbox" style="width:420px;height:300px;margin-top:20px;"></div>

<div><span id="pagingArea"></span>&nbsp;<span id="infoArea"></span></div>
<span id="recfound"></span>


